<template>
  <div>
    <el-container>
      <el-header>
        <el-row
          ><el-col :span="3"> 客户流失管理 </el-col
          ><el-col :span="6" :offset="12">
            显示即将流失的客户信息，并制定挽救措施
          </el-col></el-row
        >
      </el-header>
      <el-main>
        <el-button
          icon="el-icon-refresh-right"
          circle
          @click="sx()"
        ></el-button>
        <el-table
          :data="tableData"
          @row-dblclick="hang"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column
            prop="CusID"
            label="客户编号"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="CusName"
            label="客户名称 "
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="CLOrderDate"
            label="上次下单时间 "
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ operatingTime(scope.row.CLOrderDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="CLDate"
            label="报警时间 "
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ operatingTime(scope.row.CLDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="CLEnterDate"
            label="流失时间 "
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.CLEnterDate == null
                  ? ""
                  : operatingTime(scope.row.CLEnterDate)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="149" align="center">
            <template slot-scope="scope">
              {{
                scope.row.CLState == 1
                  ? "流失报警"
                  : scope.row.CLState == 2
                  ? "暂缓流失"
                  : "确认流失"
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作(确认流失)" width="179" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="qr(scope.row)"
                :type="
                  scope.row.CLState == 1
                    ? 'info'
                    : scope.row.CLState == 2
                    ? 'warning'
                    : 'danger'
                "
              >
                <i
                  :class="
                    scope.row.CLState == 1
                      ? 'el-icon-warning'
                      : scope.row.CLState == 2
                      ? 'el-icon-loading'
                      : 'el-icon-error'
                  "
                ></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
        <el-tabs v-model="url">
          <el-tab-pane label="暂缓流失措施 " name="first" disabled="disabled">
            <el-row>
              <!--措施-->
              <el-col :span="1" :offset="-2">
                <el-form
                  ref="formcs"
                  :model="formcs"
                  :rules="formrulecs"
                  label-width="100%"
                >
                  <el-form-item
                    label="暂缓措施细节:"
                    style="width: 110px"
                    prop="MeDesc"
                  >
                    <el-input
                      type="textarea"
                      v-model="formcs.MeDesc"
                      style="width: 1100px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      style="margin-left: 1070px"
                      @click="cszj('formcs')"
                      >保存</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-table :data="tableData1" style="width: 100%">
              <el-table-column
                label="时间"
                min-width="100"
                prop="MeDate"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ operatingTime(scope.row.MeDate) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="措施内容"
                min-width="100"
                prop="MeDesc"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <!--确认流失-->
    <el-dialog
      title="客户流失确认"
      :visible.sync="dialogVisibleklsqr"
      width="53%"
    >
      <el-row>
        <el-col :span="1" :offset="-2">
          <el-form
            ref="formls"
            :model="formls"
            :rules="formrulels"
            label-width="100%"
          >
            <el-form-item label="流失原因:" style="width: 110px" prop="MeDesc">
              <el-input
                type="textarea"
                v-model="formls.MeDesc"
                style="width: 670px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-col>
                <el-button
                  type="primary"
                  style="margin-left: 570px"
                  @click="lsqrtj('formls')"
                  >确定</el-button
                >
              </el-col>
              <el-col>
                <el-button
                  @click="dialogVisibleklsqr = false"
                  style="margin-left: 670px"
                  >取 消</el-button
                >
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
    <!--流失原因-->
    <el-dialog title="流失原因" :visible.sync="dialogVisiblekzh1" width="53%">
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column
          label="时间"
          min-width="100"
          prop="CLEnterDate"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ operatingTime(scope.row.CLEnterDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="原因"
          min-width="100"
          prop="CLReason"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  lsfy,
  cstj,
  lstj,
  cscx,
  cstjpd,
  lsxg,
  Getyycx,
  Getsx,
} from "../http/user.js";
import qs from "qs";
export default {
  data() {
    return {
      url: "",
      //每页显示数
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      tableData: [],
      tableData1: [],
      tableData2: [],
      dialogVisibleklsqr: false,
      dialogVisiblekzh1: false,
      formcs: {
        MeDesc: "",
        CLID: "",
        CusID: "",
      },
      formrulecs: {
        MeDesc: [
          {
            required: true,
            message: "请输入措施内容",
            trigger: "blur",
          },
        ],
      },
      formls: {
        MeDesc: "",
        CLID: "",
      },
      formrulels: {
        MeDesc: [
          {
            required: true,
            message: "请输入流失内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //流失添加
    lsqrtj(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          lsxg({
            params: {
              nr: this.formls.MeDesc,
              id: this.formls.CLID,
            },
          })
            .then((res) => {
              if (res.Message == "修改数据成功") {
                this.$message({
                  message: "确认成功",
                  type: "success",
                });
                this.dialogVisibleklsqr = false;
                this.sx();
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "请填写流失原因",
            type: "error",
          });
          return false;
        }
      });
    },
    //添加选择
    qr(row) {
      if (row.CLState == 1) {
        cstjpd({
          params: {
            name: row.CusID,
          },
        })
          .then((res) => {
            console.log(res);
            if (res.Row == 0) {
              lstj({
                params: {
                  name: row.CusID,
                  time: "2020-06-07",
                },
              })
                .then((res) => {
                  console.log(res);
                  this.$message({
                    message: "添加暂缓措施",
                    type: "success",
                  });
                  this.sx();
                })
                .catch((err) => {
                  console.log(err);
                });
            } else {
              this.$message({
                message: "已暂缓措施",
                type: "error",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (row.CLState == 2) {
        this.formls.CLID = row.CLID;
        this.dialogVisibleklsqr = true;
      } else if (row.CLState == 3) {
        this.$message({
          message: "该用户已确认流失",
          type: "error",
        });
      }
    },
    //措施添加
    cszj(form) {
            this.$refs[form].validate((valid) => {
        if (valid) {
 cstjpd({
        params: {
          name: this.formcs.CusID,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.Row == 0) {
            lstj({
              params: {
                id: this.formcs.CLID,
              },
            })
              .then((res) => {
                console.log(res);
                this.$message({
                  message: "添加暂缓措施",
                  type: "success",
                });
                this.sx();
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
        }else {
          return false;
        }
        });
     
      this.$refs[form].validate((valid) => {
        if (valid) {
          cstj(qs.stringify(this.formcs))
            .then((res) => {
              if (res.Message == "添加数据成功") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                cscx({
                  params: {
                    id: this.formcs.CLID,
                  },
                })
                  .then((res) => {
                    console.log(res);
                    this.tableData1 = res.Data;
                    this.sx();
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "请填写措施内容",
            type: "error",
          });
          return false;
        }
      });
    },
    //行点击事件
    hang(row) {
      this.formcs.CLID = row.CLID;
      this.formcs.CusID = row.CusID;
      if (row.CLState == 2) {
        (this.url = "first"),
          cscx({
            params: {
              id: row.CLID,
            },
          })
            .then((res) => {
              console.log(res);
              this.tableData1 = res.Data;
            })
            .catch((err) => {
              console.log(err);
            });
      } else if (row.CLState == 3) {
        this.url = "";
        this.dialogVisiblekzh1 = true;
        Getyycx({
          params: {
            id: row.CusID,
          },
        })
          .then((res) => {
            console.log(res);
            this.tableData2 = res.Data;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (row.CLState == 1) {
        Getyycx({
          params: {
            id: row.CusID,
          },
        })
          .then((res) => {
            console.log(res);
            if (res.Row == 0) {
              this.url = "first";
              cscx({
                params: {
                  id: row.CLID,
                },
              })
                .then((res) => {
                  console.log(res);
                  this.tableData1 = res.Data;
                })
                .catch((err) => {
                  console.log(err);
                });
            } else {
              this.url = "";
              this.$message({
                message: "该用户已流失",
                type: "error",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //日期格式
    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD");
    },
    //分页
    sx() {
      this.url = "";
      lsfy({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.info(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.sx();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.sx();
    },
  },
  mounted() {
    this.sx();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-3 {
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
  position: relative;
  top: -10px;
  right: -570px;
}
</style>